<template>
	<view class="content">
		<view class="add-box">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入负责人姓名" />
				</u-form-item>
				<u-form-item label-width="150" label="电话" prop="phone">
					<u-input v-model="form.phone" placeholder="请输入负责人电话" />
				</u-form-item>
				<u-form-item label-width="150" label="登陆账户" prop="username">
					<u-input v-model="form.username" placeholder="请输入负责人用户名" />
				</u-form-item>
				<u-form-item label-width="150" label="登陆密码" prop="password">
					<u-input v-model="form.password" placeholder="请输入负责人密码" type="password" />
				</u-form-item>
				<u-form-item label-width="150" label="再次输入" prop="passwordAgain" >
					<u-input v-model="form.passwordAgain" placeholder="请再次输入密码密码" type="password" />
				</u-form-item>
				<!-- 				<u-form-item label-width="150" label="用户权限" prop="contact">
					<u-input v-model="quanx" @click="selectShow = true" placeholder="请输选择用户权限" type="select" />
				</u-form-item> -->
				<u-form-item :border-bottom="false" label="头像" prop="photo" label-width="100">
					<u-upload width="160" height="160" :form-data="queryOss" :action="action" :auto-upload="false" ref="uUpload"
					 max-count="1" :show-progress="false" :multiple="false" @on-choose-complete="changeImg()"></u-upload>
				</u-form-item>
			</u-form>
		</view>
		<view class="button-box">
			<u-button type="primary" @tap="getAddUser">添加</u-button>
		</view>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
		<!-- <u-select mode="single-column" :list="selectuserList" v-model="selectUserShow" @confirm="selectUserConfirm"></u-select> -->
	</view>
</template>

<script>
	import {
		addUser,
		getUserInfo
	} from '@/api/user.js'
	import {
		ossimg
	} from '@/api/oss.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					username: '',
					password: '',
					roleId: 2,
					logo: '',
					passwordAgain: ''
				},
				selectShow: false,
				selectUserShow: false,
				quanx: '',
				action: '',
				dir: '',
				queryOss: {},
				rules: {
					password: [{
						required: true,
						message: '密码不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],

					}, {
						min: 6,
						message: '密码不能少于六个字符',
						trigger: 'blur'
					}, {
						max: 16,
						message: '密码不能多于16个字符',
						trigger: 'blur'
					}],
					passwordAgain: [{
						required: true,
						message: '请再次输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							if (this.form.password === this.form.passwordAgain) {
								return true
							} else {
								return false
							}
						},
						message: '两次密码不一致，请检查',
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: '请正确输入',
						trigger: ['blur'],

					}, {
						min: 2,
						message: '用户名不能少于两个字符'
					}, {
						max: 12,
						message: '用户名不能多于12个字符'
					}],
					name: [{
						required: true,
						message: '名字不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					phone: [{
						required: true,
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: 'blur',
					}],
				},
				selectList: [{
						value: '1',
						label: '超级管理员'
					},
					{
						value: '2',
						label: '项目管理员'
					},
					{
						value: '3',
						label: '车队管理员'
					}
				],
			};
		},
		onLoad() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			ossimg({
				dir: 'user'
			}).then(res => {
				console.log(res);
				this.queryOss = res.result
				this.queryOss.OSSAccessKeyId = res.result.accessid
				const {
					host,
					OSSAccessKeyId,
					policy,
					signature,
					dir
				} = res.result
				this.queryOss = {
					'OSSAccessKeyId': OSSAccessKeyId,
					'policy': policy,
					'signature': signature,
					'success_action_status': '200',
				}
				this.action = res.result.host
				this.dir = dir
				console.log(this.action);
			})
		},
		methods: {
			// 选择商品类型回调
			selectConfirm(e) {
				// this.form.roleId = '';
				e.map((val, index) => {
					this.form.roleId = val.value
					this.quanx = val.label
				});
			},
			changeImg(event) {
				let files = this.$refs.uUpload.lists;
				this.queryOss.Filename = files[0].file.name
				const imgFormat = files[0].url.split('/').pop().split('.')[1];
				const imgName = files[0].url.split('/').pop().split('.')[0];
				const imgMd5Name = this.$md5(imgName);
				this.queryOss.key = `${this.dir}${imgMd5Name}.${imgFormat}`
				this.form.logo = this.action + '/' + this.queryOss.key
				
			},
			// 添加
			getAddUser() {
				// 如果您不需要进行太多的处理，直接如下即可
				// console.log(this.$refs.uUpload.lists);
				// return
				this.form.roleId = 2
				if (this.form.username === '' || this.form.password === '' || this.form.phone === '') {
					uni.showToast({
						title: "数值不能为空",
						duration: 1500,
						icon: 'none'
					})
					return
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.uUpload.upload();
						delete this.form.passwordAgain
						addUser(this.form).then(res => {
							console.log(res)
							if (res.code === 1) {
								uni.showToast({
									title: "创建成功"
								})
								setTimeout(() => {
									var item = true; //item为要传的值
									var pages = getCurrentPages();
									var prevPage = pages[pages.length - 2];
									prevPage.brand = item;
									uni.navigateBack()
								}, 500)
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						})
					}
				})
				// console.log(this.form)

			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx;

		.add-box {
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 20rpx;
		}

		.button-box {
			margin-top: 80rpx;
		}
	}
</style>
